<template>
	<view>
		<uni-popup
			ref="timePickRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title mt20">
					时间选择
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view>
						<picker-view
							:indicator-style="indicatorStyle"
							:value="value"
							@change="bindChange"
							class="picker-view"
						>
							<picker-view-column>
								<view
									class="item"
									v-for="(item, index) in hours"
									:key="index"
									>{{ item }}</view
								>
							</picker-view-column>
							<!-- : -->
							<picker-view-column>
								<view
									class="item"
									v-for="(item, index) in minutes"
									:key="index"
									>{{ item }}</view
								>
							</picker-view-column>
							<!-- : -->
							<picker-view-column>
								<view
									class="item"
									v-for="(item, index) in seconds"
									:key="index"
									>{{ item }}</view
								>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button class="primary-button w90" @tap="submitChoose()">
						确定
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>
<script>
export default {
	props: {
		show: {
			type: Boolean,
			value: false,
			default: false,
		},
	},
	data() {
		return {
			indicatorStyle: `height: 50px;`,
			hours: [],
			minutes: [],
			seconds: [],
			selcetedValue: '00:00:00',
			value: [],
		}
	},
	methods: {
		bindChange(e) {
			const val = e.detail.value
			this.value = val
			this.selcetedValue = `${this.hours[val[0]]}:${
				this.minutes[val[1]]
			}:${this.seconds[val[2]]}`
		},
		submitChoose() {
			this.$emit('submit', this.selcetedValue)
			this.closePopup()
		},
		openPopup() {
			this.$refs.timePickRef.open('bottom')
			this.getHours()
			this.getMinutesOrSeconds()
		},
		closePopup() {
			this.$refs.timePickRef.close()
			this.$emit('close')
		},
		getHours() {
			for (let i = 0; i < 24; i++) {
				if (i < 10) {
					this.hours.push(`0${i}`)
				} else {
					this.hours.push(i)
				}
			}
		},
		getMinutesOrSeconds() {
			for (let i = 0; i <= 59; i++) {
				if (i < 10) {
					this.minutes.push(`0${i}`)
					this.seconds.push(`0${i}`)
				} else {
					this.minutes.push(i)
					this.seconds.push(i)
				}
			}
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.picker-view {
	text-align: center;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
</style>
